<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<table id="emp">
				<thead>
					<tr>
						<th>编号</th>
						<th>姓名</th>
						<th>职位</th>
						<th>工资</th>
						<th>补贴</th>
						<th>所在部门</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="emp in emps">
						<td>{{ emp.no }}</td>
						<td>{{ emp.name }}</td>
						<td>{{ emp.job }}</td>
						<td>{{ emp.sal }}</td>
						<td>{{ emp.comm }}</td>
						<td>{{ emp.dept.name }}</td>
					</tr>
				</tbody>
			</table>
			<div id="page">
				<a id="prev" v-bind:href=prev>上一页</a>&nbsp;&nbsp;
				<a id="next" v-bind:href=next>下一页</a>
			</div>	
		</div>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.min.js"></script>
		<script>
			const app = new Vue({
				el:'#app',
				data:{
					emps:[],
					prev: '',
					next: ''
				},
				// 从网络获取JSON数据
				created() {
					fetch('https://120.77.222.217/api/emps/',{
						// 在请求头中提供token，才能访问该IP接口
						headers:{"token":"35ad60445cea11e1000163e02b646"}
					})
					.then((response) => { return response.json() })
					.then((json) => {
						// json数据赋值
						this.emps = json.results
						this.prev = json.prev
						this.next = json.next
					})
				}
			})
		</script>
	</body>
</html>
